import React, {useEffect, useState} from 'react'
import TabBar from '../../components/TabBar'
import './style.scss'
import {fetchHomeBanner, fetchCates, fetchItems, addItemToCart} from '../../api/index'
import {useNavigate, useDispatch, useSelector} from 'umi'
import InfiniteScroll from 'react-infinite-scroll-component'
import Icon from '@/components/Icon'
import HeaderHome from './components/HeaderHome'
import { Swiper, Grid, SpinLoading} from 'antd-mobile'
export default function home() {
const navigate = useNavigate()
const dispatch = useDispatch()
// const {items, number, total} = useSelector((state: { count: { items: any } }) => state.count)

// console.log(items);
// console.log(number);

//点击购物车添加到购物车
const commodityDetails = (id: any) => {
 

  dispatch({
    type: 'count/addCate',
    data: {
      goodsId: id,
      number: 1
    }
  })
// navigate('/detail', {
//   state: {
//     id
//   }
// })
}
//点击购物车添加到购物车


  //首页轮播图的接口请求
 const fetchHomeBannered = () => {
  fetchHomeBanner().then(res => {
    if (res.data.code === 0) {
      setColors(res.data.data)
    }
  })
 }
  //首页轮播图的接口请求

//商品分类九宫格请求
const fetchCatesed = () => {
  fetchCates().then(res => {
    if (res.data.code === 0) {
      setCates(res.data.data)
    }
  })
}
//商品分类九宫格请求

//商品分类九宫格的数据渲染
const [cates, setCates] = useState([])
//商品分类九宫格的数据渲染

//商品列表请求接口封装
const fetchItemsed = (params = {}) => {
  fetchItems(params).then(res => {
if (res.data.code === 0) {
  setCartHome([
    ...cartHome,
    ...res.data.data.result
  ])
}
if (res.data.code ===700) {
  setHasMore(false)
}
  })
}
//商品列表请求接口封装

//商品列表的数据
const [cartHome, setCartHome] = useState<any[]>([])
  //轮播图的图片渲染
  const [colors, setColors] = useState([])
  const itemed = colors.map((color, index) => (
    <Swiper.Item key={color.id}>
     <img src={color.picUrl} alt="" />
    </Swiper.Item>
  ))
  //轮播图的图片渲染

  

 //无线滚动加载商品列表数据
 const [page, setPage] = useState(1)
 const [pageSize, setPageSize] = useState(5)
 const [hasMore, setHasMore] = useState(true)
 const fetchMoreData = () => {
  setPage(page+1)
 }
 useEffect(() => {
  fetchItemsed({page,pageSize})
 }, [page])

 useEffect(() => {
  fetchCatesed()
  fetchHomeBannered
 }, [])
//无线滚动加载商品列表数据
  return (
    <>
    <HeaderHome/>
    <div className='_home'>
      
      <div className="contains">
        {/* 轮播图 */}
      <Swiper
      autoplay= {true}
      loop = {true}
      className = 'swiper_img'
      >
      {itemed}
      </Swiper>
        {/* 轮播图 */}

        {/* 九宫格 */}
<Grid columns={4} gap={6} className = 'cateGrid'>

    {cates.map(el => {
      return(
<Grid.Item className='cate_grid' key={el.id} onClick = {
  () => {
    navigate('/itemLists', {
      state: {
        id: el.id,
        name: el.name
      }
    })
  }
}>
              <img src={el.icon} alt="" />
              <span>{el.name}</span>
            
</Grid.Item>
      )
    })}
          
        </Grid>
        {/* 九宫格 */}

        {/* 商品列表渲染 */}
        <InfiniteScroll
    dataLength={cartHome.length}
    next={fetchMoreData}
    style={{ display: 'flex', flexDirection: 'column'  }} //To put endMessage and loader to the top.
    hasMore={hasMore}
    loader={
    <div style={{display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
      <SpinLoading color='primary' />
    </div>
    }
    endMessage={
      <p style={{ textAlign: 'center', color: 'red'}}>
        <b>暂无其他商品</b>
      </p>
    }
  >

        <div className='cartHome_nav'>
          {
            cartHome.map(item => {
           return(
            <div className='cartHomes' key={item.id} onClick = {
              () => {
                navigate('/detail', {
                  state: {
                    id: item.id
                  }
                })
              }
              }>

            <img src={item.pic} alt="" />
            <div className='itemNav'>
            <p>{item.name}</p>
            <div className='price_Nav'>
            <span>${item.minPrice}</span>
            <Icon name = '&#xe61b;' 
            size={25} 
            color='red' 
            stop = {true}
            onClick={
              () => {
                 commodityDetails(item.id)
              }
             
            }/>
           </div>
        
            </div>
            </div>
           )  
            })
          }
          
        </div>
        </InfiniteScroll>
        {/* 商品列表渲染 */}
      </div>
     
    </div>
     <TabBar/>
     </>
  )
}
